<template>
  <div class="login-content primary-blue">
    <el-row style="margin-left: -10px; margin-right: -10px;">
      <el-col :span="12" :xs="0" :sm="12" :md="12" :lg="12" :xl="12"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <div class="login-content-left flex-center">
          <img src="@/assets/images/register-bg.jpg" alt="login" class="login-content-banner">
        </div>
      </el-col>
      <el-col :span="12" :xs="0" :sm="12" :md="12" :lg="12" :xl="12"
              style="padding-left: 10px; padding-right: 10px;"
      >
        <div class="login-content-right">
          <h1>{{ $t('Login1') }}</h1>
          <div class="login-content-form">
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top">
              <el-form-item :label="$t('Login2')" prop="account">
                <el-input :placeholder="$t('Login3')" v-model="formData.account"/>
              </el-form-item>
              <el-form-item :label="$t('Login4')" prop="password">
                <el-input type="password" :placeholder="$t('Login5')" show-password v-model="formData.password"/>
              </el-form-item>
              <div style="display: flex; justify-content: space-between; margin-top: 55px;">
                <p class="tips">{{ $t('Login6') }} <span @click="jumpToRegister">{{ $t('Login7') }}</span></p>
                <!--                  <span class="forgot-password"> 忘记密码？ </span>-->
              </div>
              <el-form-item>
                <el-button type="primary" size="large"
                  class="sing-in-btn" @click="handleLogin"
                  :loading="isLoading"
                >{{ $t('Login1') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { login } from '@/api/index.js'
  import { useI18n } from "vue-i18n"
  // 解构引入的函数 , 获得我们需要的 , 额 , 应该是个函数 t
  const { t } = useI18n()
  import { ElNotification } from "element-plus";
  const router = useRouter()
  const formRef = ref()
  const formData = reactive({
    account: '',
    password: ''
  })
  const rules = {
    account: [{ required: true, message: t('TipText3'), trigger: 'blur' }],
    password: [{ required: true, message: t('TipText4'), trigger: 'blur' }],
  }
  const isLoading = ref(false)
  const handleLogin = async () => {
    await formRef.value?.validate()
    isLoading.value = true
    login(formData).then(res => {
      ElNotification({
        title: 'Success',
        message: t('TipText1'),
        type: 'success',
      })
      isLoading.value = false
      sessionStorage.setItem('token', res.data.userinfo.token)
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.userinfo))
      router.push('/')
    }).catch(err => {
      isLoading.value = false
      formData.password = ''
    })
  }
  const jumpToRegister = () => {
    router.push('/register')
  }
</script>
<style scoped>
.login-content {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 20px;
  max-width: 1074px;
  margin: 20px auto 30px
}

.login-content-banner {
  width: 100%;
  height: 100%;
  max-width: 514px;
  max-height: 534px
}

.login-content-right h1 {
  font-weight: 600;
  font-size: 36px;
  color: var(--color-black);
  margin: 15px 0 35px
}

.login-content-tab {
  margin-bottom: 20px
}

.login-content-tab .el-button {
  min-width: 98px;
  height: 34px;
  margin-right: 20px;
  font-weight: 500;
  font-size: 14px;
  padding: 0
}

.login-content-form .forgot-password {
  color: var(--color-main);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer
}

.login-content-form .el-form--label-top .el-form-item__label {
  display: initial;
  padding-bottom: 8px;
  font-weight: 500;
  font-size: 14px
}

.login-content-form .el-input .el-input__suffix {
  margin-right: 10px
}

.login-content-form .el-input .el-input__inner {
  height: 50px;
  max-width: 500px
}

.login-content-form .sing-in-btn {
  max-width: 500px;
  width: 100%;
  height: 58px;
  margin-top: 30px;
  font-weight: 700;
  font-size: 14px
}

.login-content-form .tips {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-title)
}

.login-content-form .tips span {
  color: var(--color-main);
  cursor: pointer
}

.login-content-form .form-phone {
  position: relative;
  cursor: pointer
}

.login-content-form .form-phone .el-input__inner {
  padding-left: 100px
}

.login-content-form .form-phone .vue-country-popover-container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%)
}

.login-content-form .form-phone .area-code {
  width: 80px
}

.login-content-form .form-phone .area-code span {
  display: inline-block;
  width: 50px;
  padding-left: 15px
}

.login-bottom {
  max-width: 1000px;
  margin: 52px auto 107px
}

.login-bottom-item {
  flex-direction: column
}

.login-bottom span {
  font-weight: 500;
  font-size: 12px;
  margin-top: 15px
}

.vue-country-intl-popover {
  z-index: 9999
}

.vue-country-intl-popover .vue-country-item.selected,.vue-country-intl-popover .vue-country-item:not(.selected):hover {
  background-color: var(--color-main)
}
/* :deep(.el-input__inner){
  border: 1px solid #dcdfe6;
  padding: 0 15px;
} */
:deep(.login-content-form .el-input .el-input__inner){
  height: 50px;
  max-width: 500px;
}
.el-button--primary {
    color: #fff;
    background-color: var(--color-main);
    border-color: var(--color-main);
}
</style>